<script setup>
import {ref,reactive,onMounted} from 'vue'
import { reqAuthAdmin,reqMenuSelectList,reqUpdateUser} from '../../../api/menu';



onMounted(()=>{
    getAuthAdmin()
    getMenuSelectList()
})

//账号管理列表数据
const paginationData=reactive({
    pageNum:1,
    pageSize:10
})
const total=ref(0)
const authAdminData=ref([])
const getAuthAdmin=async()=>{
    const res=await reqAuthAdmin(paginationData)
    console.log(res);
    if(res.data.code===10000){
        authAdminData.value=res.data.data.list
        total.value=res.data.data.total
    }
}

//菜单下拉权限数据
const menuSelectData=ref([])
const getMenuSelectList=async()=>{
    const res=await reqMenuSelectList()
    console.log( res);
    
    menuSelectData.value=res.data.data
}

//根据权限id匹配权限名称
const permissionName=(id)=>{
    const data=menuSelectData.value.find(el=>el.id===id)
    return data ? data.name : '超级管理员'
}

const formatDate = (timestamp) => {
    const date = new Date(timestamp);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要+1
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
};

//新增或编辑
const dialogVisible=ref(false)
const formRef=ref()
const userInfo =reactive({
    mobile:'',
    name:'',
    permissions_id:''
})

const rules=reactive({
    name:[
    { required: true, message: '请输入名称', trigger: 'blur' },
    ],
    permissions_id:[
    { required: true, message: '请选择权限', trigger: 'blur' },
    ]
})
const beforeClose=()=>{
    dialogVisible.value=false

}
//修改用户信息
const updateUserInfo=(row)=>{
    dialogVisible.value=true
    userInfo.mobile=row.mobile
    userInfo.name=row.name
    userInfo.permissions_id=row.permissions_id  
}

//提交用户信息
const confirm=async(formEl)=>{
    if (!formEl) return
    await formEl.validate((valid, fields) => {
    if (valid) {
        reqUpdateUser({name:userInfo.name,permissions_id:userInfo.permissions_id}).then(res=>{
            console.log(res);
            if(res.data.code===10000){
                getAuthAdmin()
                beforeClose()
            }
            
        })
    } else {
      console.log('error submit!', fields)
    }
  })
   
}
</script>

<template>
    <el-card>
        <!-- 账号管理列表 -->
        <el-table :data="authAdminData" >
        <el-table-column prop="id" label="id" ></el-table-column>
        <el-table-column prop="name" label="昵称"></el-table-column>
        <el-table-column prop="permissions_id" label="所属组别">
            <template #="{row}">
                {{ permissionName(row.permissions_id) }}
            </template>
        </el-table-column>
        <el-table-column prop="mobile" label="手机号"></el-table-column>
        <el-table-column prop="active" label="状态">
            <template #="{row}">
                <el-tag :type="row.active ? 'success':'danger'">{{row.active?'正常':'失效'  }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间">
            <template #="{row}">
                {{ formatDate(row.create_time) }}
            </template>
        </el-table-column>
        <el-table-column prop="" label="操作">
            <template #="{row}">
                <el-button type="primary" @click="updateUserInfo(row)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="paginationData.pageNum"
      :page-size="paginationData.pageSize"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="->,total, prev, pager, next"
      :total="total"
    />
    <!-- 新增或编辑 -->
    <el-dialog 
    v-model="dialogVisible" 
    :before-close="beforeClose"
    title="编辑用户"
     width="500">
    <el-form 
    ref="formRef" 
    :model="userInfo"
    :rules="rules" 
    label-position="left" 
    label-width="auto">
        <el-form-item label="手机号" prop=" mobile">
            <el-input  v-model="userInfo.mobile" disabled></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="name">
            <el-input v-model="userInfo.name" ></el-input>
        </el-form-item>
        <el-form-item label="菜单权限" prop="permissions_id">
            <el-select
            v-model="userInfo.permissions_id"
            placeholder="请选择权限数据"
            size="large"
            style="width: 240px"
            >
            <el-option
                v-for="item in menuSelectData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            />
            </el-select>
        </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="confirm(formRef)">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
    </el-card>
  
</template>

<style  scoped>

</style>